<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .container {
            margin: 0 auto;
            margin-top: 70px;
            text-align: center;
            width: 300px;
        }
        .subTitle {
            color: gray;
            font-size: 14px;
        }
        .title {
            font-size: 45px;
        }
        .input {
            width: 90%;
            border-radius: 6px;
            height: 25px;
            margin-top: 10px;
            border-color: silver;
            border-style: solid;
            background-color: cornsilk;
        }
        .inputContainer {
            text-align: left;
            margin-bottom: 20px;
        }
        .subConainer {
            text-align: left;
        }
        .field {
            font-size: 14px;
        }
        .tip {
            margin-top: 5px;
            font-size: 12px;
            color: gray;
        }
        .setting {
            font-size: 9px;
            color: black
        }
        .label {
            font-size: 12px;
            margin-left: 5px;
            height: 20px;
            vertical-align: middle;
        }
        .checkbox {
            height: 20px;
            vertical-align: middle;
        }
        .btn {
            border-radius: 10px;
            height: 40px;
            width: 300px;
            margin-top: 30px;
            background-color: deepskyblue;
            border-color: blue;
            color: white;
        }

    </style>
  </head>
  <body>
    <div id="Application">
        <div class="container">
            <div class="subTitle">加入我们，一起创造美好世界</div>
            <h1 class="title">创建你的帐号</h1>
            <div v-for="(item,index) in fields" class="inputContainer">
                <div class="field">{{item.title}}
                    <span v-if="item.required" style="color:red">*</span>
                </div>
                <input v-model="item.model" class="input" :type="item.type" />
                <div class="tip" v-if="index == 2">请确认密码需要大于6位</div>
            </div>
            <div class="subContainer">
                <div class="setting">偏好设置</div>
                <input v-model="receiveMsg" class="checkbox" type="checkbox"/><label class="label">接收更新邮件</label>
            </div>
            <button @click="createAccount" class="btn">创建帐号</button>
        </div>
    </div>
  </body>

  <script>
    const App= {
      data(){
        return {
           fields:[
            {
                title:"用户名",
                required:true,
                type:"text",
                model:""
            },{
                title:"邮箱地址",
                required:false,
                type:"text",
                model:""
            },{
                title:"密码",
                required:true,
                type:"password",
                model:""
            }
           ],
           receiveMsg : false
        }
      },
      computed:{
        name:{
            get(){
                return this.fields[0].model
            },
            set(value){
                this.fields[0].model=value
            }
        },
        email:{
            get(){
                return this.fields[1].model
            },
            set(value){
                this.fields[1].model=value
            }
        },
        password:{
            get(){
                return this.fields[2].model
            },
            set(value){
                this.fields[2].model=value
            }
        }
      },
      methods:{
        emailCheck(input){
            var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
            if(!verify.test(input)){
                return false
            }else{
                return true
            }
        },
        createAccount(){
            if(this.name.length == 0){
                alert("请输入用户名")
                return;
            }else if(this.password.length <= 6){
                alert("密码设置需要大于6位字符")
                return;
            }else if(this.email.length > 0 && !this.emailCheck(this.email)){
                alert("请输入正确的邮箱")
                return;
            }
            alert("注册成功")
            console.log(`name:${this.name}\npassword:${this.password}\nemail:${this.email}\nreceiveMsg:${this.receiveMsg}`)
        }
      }
    }
    Vue.createApp(App).mount("#Application")
  </script>

</html>